<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" href="./assets/index.css" />
    <style>
        #app {
            width: 800px;
            margin: 0 auto;
        }

        .big-title-dl {
            font-size: 24px;
            font-weight: bold;
            display: inline-block;
        }
        .year-dl {
            font-size: 24px;
            color: #999;
            display: inline-block;
        }

        .content-box-dl {
            display: flex;
            margin-top: 20px;
        }

        .img-box-dl {
            width: 135px;
            flex-shrink: 0;
        }
        .content-list-dl {
            padding-left: 20px;
        }

        .row-dl {
            display: flex;
            margin: 3px 0;
        }
        .row-dl .label-dl {
            margin-right: 10px;
            flex-shrink: 0;
        }

        .split-dl::after {
            content: '/';
            padding: 0 5px;
        }
        .split-dl:last-child::after {
            content: none;
        }

        .score-box-dl {
            margin: 10px 0;
        }
        .star-box-dl {
            display: flex;
            align-items: center;
        }
        .score-dl {
            flex-shrink: 0;
            width: 40px;
        }
        .stars-dl {
            flex-shrink: 0;
        }

        .title-dl {
            color: green;
            font-size: 18px;
            margin: 10px 0;
        }
        .info-txt-dl {
            text-indent: 32px;
        }

        .add-comment-box-dl {
            margin-bottom: 20px;
        }

        .comment-list-dl {
            margin-bottom: 50px;
        }

        .comment-box-dl {
            border-bottom: 1px solid #aaa;
            margin: 10px 0;
            padding-bottom: 10px;
        }
        .comment-box-dl:last-child {
            border-bottom: none;
        }
        .comment-box-dl .box-top-dl {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }
        .box-top-dl .user-dl {
            flex-shrink: 0;
        }
        .box-top-dl .star-dl {
            flex-shrink: 0;
            margin: 0 10px;
        }
        .box-top-dl .time-dl {
            flex-shrink: 0;
            color: #999;
            font-size: 16px;
        }

        .link-right-dl {
            float: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <div class="big-title-dl">{{film.title}} {{film.original_title}}</div>
            <div class="year-dl">({{film.year}})</div>
            <el-link class="link-right-dl" type="primary" href="./index.html" >回到首页</el-link>
        </div>

        <div class="content-box-dl">
            <div class="img-box-dl">
                <el-image style="max-width: 135px;" :src="film.cover_url" fit="cover" />
            </div>
            <div class="content-list-dl">
                <div class="row-dl">
                    <div class="label-dl">导演:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="d in film.directors" >{{d.name}}</span>
                    </div>
                </div>

                <!-- <div class="row-dl">
                    <div class="label-dl">编剧:</div>
                    <div class="content-dl"></div>
                </div> -->

                <div class="row-dl">
                    <div class="label-dl">主演:</div>
                    <div class="content-dl">
                        <template v-for="(at,i) in film.actors">
                            <span class="actor-dl split-dl" v-if="i < 5"  >{{at.name}}</span>
                        </template>
                        <span v-show="film.actors?.length > 5" class="split-dl" style="color: #999;">更多....</span>
                    </div>
                </div>

                <div class="row-dl">
                    <div class="label-dl">类型:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="g in film.genres" >{{g}}</span>
                    </div>
                </div>
                <div class="row-dl">
                    <div class="label-dl">制片国家/地区:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="c in film.countries" >{{c}}</span>
                    </div>
                </div>
                <div class="row-dl">
                    <div class="label-dl">语言:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="a in film.languages" >{{a}}</span>
                    </div>
                </div>
                <div class="row-dl">
                    <div class="label-dl">上映日期:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="p in film.pubdate" >{{p}}</span>
                    </div>
                </div>
                <div class="row-dl">
                    <div class="label-dl">片长:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="ds in film.durations" >{{ds}}</span>
                    </div>
                </div>
                <div class="row-dl">
                    <div class="label-dl">又名:</div>
                    <div class="content-dl">
                        <span class="split-dl" v-for="k in film.aka" >{{k}}</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="score-box-dl">
            <div>豆瓣评分</div>
            <div class="star-box-dl" >
                <div class="score-dl" >{{film.rating?.value}}</div>
                <div class="stars-dl">
                    <el-rate v-model="starCount" size="large" :disabled="true" ></el-rate>
                </div>
            </div>
        </div>

        <div class="info-dl">
            <div class="title-dl" >{{film.title}}的剧情简介</div>
            <div class="info-txt-dl">{{film.intro}}</div>
        </div>

        <hr>

        <div>
            <div class="title-dl" >发表评论</div>
            <div class="add-comment-box-dl">
                <el-rate v-model="comment.star" size="large" ></el-rate>
                <el-input v-model="comment.content" :rows="4" type="textarea" placeholder="填写评论"></el-input>
                <el-button type="primary" style="margin-top: 10px;" @click="doAddComment">确定</el-button>
            </div>
            <div class="title-dl" >{{film.title}} 的评论</div>
            <div class="comment-list-dl">
                <div class="comment-box-dl" v-for="c in arr">
                    <div class="box-top-dl">
                        <div class="user-dl">{{c.loginName}}</div>
                        <div class="star-dl">
                            <el-rate v-model="c.star" size="large" :disabled="true" ></el-rate>
                        </div>
                        <div class="time-dl">{{c.cd}}</div>
                    </div>
                    <div class="comment-txt-dl">{{c.content}}</div>
                </div>

                <div v-if="pageNum < pages">
                    <el-button type="info" plain @click="doLoadComments" size="small">加载更多</el-button>
                </div>

            </div>
        </div>

    </div>
    <script src="./assets/vue.global.prod.js"></script>
    <script src="./assets/index.full.js"></script>
    <script src="./assets/index.iife.min.js"></script>
    <script src="./assets/axios.min.js"></script>
    <script src="./assets/film.js"></script>
    <script>
        const { createApp } = Vue;
        let app = createApp({
            data() {
                return {
                    login: {},
                    loginFlag: false,
                    filmId: '36090457',
                    film: {},
                    starCount: 0,
                    comment: {
                        content: '',
                        star: 0
                    },
                    pageNum: 0,
                    pageSize: 2,
                    arr: [], // 评论列表数据
                    pages: -1,
                }
            },
            methods: {
                 async doLoadFilmData() {
                    try {
                        const resp = await axios.get('/film/movie/' + this.filmId);
                        let result = resp.data;
                        console.log('result:', result);
                        this.film = result.data;
                        this.starCount = this.film.rating.star_count;
                    } catch (error) {
                        console.log('error:', error);
                    }
                },
                async doAddComment() {
                    if(!this.loginFlag) {
                        this.$message.warning('您还未登录，不能发表评论');
                        return;
                    }
                    let params = {
                        star: this.comment.star, 
                        content: this.comment.content.trim(), 
                        filmId: this.filmId, 
                        userId: this.login.id, 
                        loginName: this.login.loginName
                    };
                    if (params.content.length <= 0) {
                        this.$message.warning('评论内容不能为空');
                        return;
                    }
                    if (params.star < 1) {
                        this.$message.warning('请选择评分');
                        return;
                    }

                    try {
                        const resp = await axios.post('/comment/add', params);
                        let result = resp.data;
                        console.log('result:', result);
                        if (result.success) {
                            this.$message.success(result.msg);
                            this.comment.star = 0;
                            this.comment.content = '';
                        } else {
                            this.$message.error(result.msg);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                },

                async doLoadComments() {
                    let pn = this.pageNum;
                    pn++;
                    if (this.pages != -1 && pn > this.pages) {
                        this.$message.warning('已加载全部评论');
                        return;
                    }
                    this.pageNum = pn;
                    let params = `?pageNum=${this.pageNum}&pages=${this.pageSize}&filmId=${this.filmId}`;
                    try {
                        const resp = await axios.get('/comment/findPageByFilm'+params);
                        let result = resp.data;
                        console.log('result:', result);

                        let pageInfo = result.data;
                        this.pages = pageInfo.pages;
                        let list = pageInfo.list;

                        for(let i=0;i<list.length;i++){
                            let c = list[i];
                            let d = new Date(c.createDate);
                            c.cd = d.toLocaleString();
                            this.arr.push(c);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                }

            },
            mounted() {
                let search = location.search;
                //console.log(search);
                let filmId = search.substring( '?filmId='.length );
                console.log('filmId:', filmId);
                if(filmId){
                    this.filmId = filmId;
                }
                this.doLoadFilmData();
                this.doLoadComments();

                let str = localStorage.getItem('login');
                if (null == str) {
                    this.$message.error('您还未登录');
                    return;
                }
                let login = JSON.parse(str);
                this.login = login;
                this.loginFlag = true;
            },
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>